<style scoped lang="scss">
.calendar-picker {
  width: 10rem;
  height: 14.7733rem;
  background-color: $white-color;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  border-radius: 0.2667rem 0.2667rem 0 0;

  .calendar-picker-header {
    width: 10rem;
    height: 3.1467rem;
    background-color: $white-color;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .calendar-picker-header-title {
      font-size: 0.48rem;
      color: #000;
    }

    .calendar-picker-header-center {
      font-size: 0.48rem;
      color: #000;
    }

    .calendar-picker-header-buttom {
      width: 10rem;
      height: 1.0667rem;
      border-bottom: 1px solid #000;
      box-sizing: border-box;

      ul {
        width: 10rem;
        height: 1.0667rem;
        display: flex;
        align-items: center;
        justify-content: space-around;

        li {
          font-size: 0.4267rem;
          color: #000;
        }
      }
    }
  }

  .calendar-picker-content {
    width: 10rem;
    height: 8.1867rem;
    background-color: $white-color;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    @include horizontal-scroll-hidden;
    margin-top: 0.4rem;

    .box {
      width: 10rem;
      height: 8.1867rem;
    }

    .calendar-picker-content-bottom {
      width: 10rem;
      height: .96rem;
    }

    .calendar-picker-content-title {
      width: 10rem;
      height: 1.0667rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.4267rem;
      color: #000;
    }

    .calendar-picker-content-top {
      width: 10rem;
      height: 6.5867rem;
      margin-top: 0.2667rem;

      ul {
        width: 10rem;
        height: 1.0667rem;

        li {
          width: 1.42rem;
          height: 1.44rem;
          float: left;
          font-size: 0.4267rem;
          color: #000;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0.1rem;
        }
      }
    }
  }
}

.calendar-picker-content-bottom {
  width: 10rem;
  height: 1.0667rem;
  background-color: $white-color;
  position: absolute;
  bottom: 1rem;
  left: 0;

  button {
    width: 9rem;
    background-color: #ee0a24;
    height: 1.0667rem;
    font-size: 0.4267rem;
    border: 0;
    border-radius: 1rem;
    margin-left: 0.5rem;
  }
}
</style>
<template>
  <!-- 日历选择器 -->
  <div class="calendar-picker">
    <div class="calendar-picker-header">
      <div class="calendar-picker-header-title">
        <span>日期选择</span>
      </div>
      <div class="calendar-picker-header-center">
        <span>{{ currentYear }}年{{ currentMonth + 1 }}月</span>
      </div>
      <div class="calendar-picker-header-buttom">
        <ul>
          <li>日</li>
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li>六</li>
        </ul>
      </div>
    </div>
    <div class="calendar-picker-content" ref="content">
      <div class="box" ref="box">
        <div v-for="(monthData, index) in allMonthsData" :key="index">
          <div class="calendar-picker-content-title">
            <!-- 修正显示的年份和月份 -->
            <p>{{ monthData.year }}年{{ monthData.month + 1 }}月</p>
          </div>
          <div class="calendar-picker-content-top">
            <ul>
              <!-- 修正遍历的数据，使用 monthData.days 作为日期数组 -->
              <li v-for="(date, dateIndex) in monthData.days" :key="dateIndex">
                {{ date.day }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar-picker-content-bottom">
      <button>确认</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      allMonthsData: [],
      currentYear: new Date().getFullYear(),
      visibleYear: new Date().getFullYear(),
      visibleMonth: new Date().getMonth(),
      monthPositions: [],
      startYear: 2020
    }
  },
  mounted() {
    this.generateAllMonthsCalendar();
    setTimeout(() => {
      this.calculateMonthPositions();
      this.scrollToBottom();
    }, 100);
    window.addEventListener('resize', this.calculateMonthPositions);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateMonthPositions);
  },
  methods: {
    generateAllMonthsCalendar() {
      const now = new Date();
      const currentYearVal = now.getFullYear();
      const monthsData = [];
      
      for (let year = this.startYear; year <= currentYearVal; year++) {
        const endMonth = year === currentYearVal ? now.getMonth() + 1 : 12;
        for (let month = 0; month < endMonth; month++) {
          const firstDay = new Date(year, month, 1);
          const daysInMonth = new Date(year, month + 1, 0).getDate();
          const days = Array.from({length: firstDay.getDay()}, () => ({
            day: '', 
            isCurrentMonth: false
          })).concat(
            Array.from({length: daysInMonth}, (_, i) => ({
              day: i + 1,
              isCurrentMonth: true,
              isToday: this.isToday(new Date(year, month, i + 1)),
              date: new Date(year, month, i + 1)
            }))
          );
          
          monthsData.push({ year, month, days });
        }
      }
      this.allMonthsData = monthsData.reverse();
    },
    calculateMonthPositions() {
      this.monthPositions = this.allMonthsData.map((month, index) => {
        const el = this.$refs[`month-${index}`]?.[0];
        return el ? {
          top: el.offsetTop,
          height: el.offsetHeight,
          ...month
        } : null;
      }).filter(Boolean);
    },
    handleScroll: _.debounce(function() {
      const { scrollTop, clientHeight } = this.$refs.content;
      const middlePoint = scrollTop + clientHeight / 2;
      
      this.monthPositions.some(position => {
        if (middlePoint >= position.top && middlePoint <= position.top + position.height) {
          this.visibleYear = position.year;
          this.visibleMonth = position.month;
          return true;
        }
      });
    }, 300)
  }
}
</script>